<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <div style="position: absolute;top: .2rem;left: 1.0875rem;color: black;font-size: .2rem;cursor: pointer;" id="username">
        <img src="images/user.jpg" alt="" style="border-radius: 15px;margin-right: 10px;" th:src="@{/images/user.jpg}">[[${#session.getAttribute('loginCustomer')}]]
    </div>
<!--    <div th:text="${'欢迎您'+#session.getAttribute('loginCustomer')}">欢迎您</div>-->
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/buy.css">
    <!-- 先引入jquery  -->
    <script src="js/jquery.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <script src="js/car.js"></script>
</head>

<body>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->

                <div class="cart-item-list" style="position: relative">
                    <div class="buySuc" style="display: none;position: absolute;bottom: 100px;left:50%;width: 400px;height: 120px;line-height: 120px;background-color: rgb(55, 62, 163,.5);transform: translate(-50%,-50%);text-align: center;font-size: 40px;color: bisque;">
                        购买成功
                    </div>
                    <div class="cart-item" id="1">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id=""  class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/nike.jpg" alt="">
                            </div>
                            <div class="p-msg">耐克运动鞋 Air Jordan1 MID AJ1乔1男鞋女鞋烟灰影子芝加哥UNION黑红脚趾篮球鞋</div>
                        </div>
                        <div class="p-price">￥666.6</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥666.6</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="2">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/bosideng.jpg" alt="">
                            </div>
                            <div class="p-msg">波司登羽绒服BOSIDENG 女羽绒服可脱卸帽短款2019新款时尚潮流保暖外套 亮红 </div>
                        </div>
                        <div class="p-price">￥1000</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥1000</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="3">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/adidas.jpg" alt="">
                            </div>
                            <div class="p-msg">阿迪达斯官网adidas 三叶草 男装运动短袖T恤FM9902 FM9903 FM9904 白</div>
                        </div>
                        <div class="p-price">￥300</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥300</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="4">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/martens.jpg" alt="">
                            </div>
                            <div class="p-msg">马汀博士(Dr.Martens) 1460 Pascal20 20新款男款时尚经典潮靴马丁靴子</div>
                        </div>
                        <div class="p-price">￥800</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥800</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="5">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/xuebi.jpg" alt="">
                            </div>
                            <div class="p-msg">雪碧 Sprite 柠檬味 汽水 碳酸饮料 </div>
                        </div>
                        <div class="p-price">￥4</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥4</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="6">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/cocacola.jpg" alt="">
                            </div>
                            <div class="p-msg">可口可乐 Coca-Cola 零度 Zero 汽水 碳酸饮料 </div>
                        </div>
                        <div class="p-price">￥4</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥4</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="7">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/latiao.jpg" alt="">
                            </div>
                            <div class="p-msg">卫龙 辣条 网红办公室怀旧小吃 儿时豆干豆皮辣片休闲零食 传统香辣味大面筋</div>
                        </div>
                        <div class="p-price">￥5</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥5</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="8">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/xiatiao.png" alt="">
                            </div>
                            <div class="p-msg">乐事 奇多真鲜虾条65g/袋鲜虾原味香辣味熬夜看剧休闲零食品 膨化食品 香辣味65g</div>
                        </div>
                        <div class="p-price">￥5</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥5</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="9">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/pen.jpg" alt="">
                            </div>
                            <div class="p-msg">PILOT/百乐 88G钢笔套装 FPMR1/FPMR2/FPMR3 高档商务送礼套装 多款可选 白色虎纹(MR2套装) F尖</div>
                        </div>
                        <div class="p-price">￥220</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥220</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="10">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/ink.jpg" alt="">
                            </div>
                            <div class="p-msg">日本百乐（PILOT）钢笔墨水 30ml非碳素墨水不堵笔 INK-30-B 原装进口 黑色</div>
                        </div>
                        <div class="p-price">￥50</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥50</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="11">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/eraser.jpg" alt="">
                            </div>
                            <div class="p-msg">得力(deli)2块黄色绘画4B200A美术橡皮擦 7540</div>
                        </div>
                        <div class="p-price">￥2</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥2</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item" id="12">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/pencil.jpg" alt="">
                            </div>
                            <div class="p-msg">得力(deli)HB原木书写铅笔 三角杆素描绘图学生铅笔 30支/桶S943</div>
                        </div>
                        <div class="p-price">￥1</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥1</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                </div>

                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价： <em>￥12.60</em></div>
                        <button onclick="send()" class="btn-area">去结算</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function send(){
                $('.buySuc').css('display', 'block')
                setTimeout(function() {
                    $('.buySuc').css('display', 'none')
                }, 2000)
                var dataList = [];
                for(var i=1;i<=12;i++){
                    var check = $("#"+i+" .j-checkbox ").prop("checked")
                    if(!check) continue;
                    var id = i;
                    var name = $("#username").text().replace(/[\r\n]/g,"").replace(/\ +/g,"");
                    var price = $("#"+i+" > .p-price").text().substr(1);
                    var num = $("#"+i+" >  .p-num  .quantity-form .itxt").prop("value").replace(/[\r\n]/g,"").replace(/\ +/g,"");
                    var str = {"id":i,"name":name,"price":price,"num":num}
                    dataList.push(str)
                }
                $.ajax({
                        url:"/sell",
                        type:"post",
                        contentType : "application/json",
                        data:JSON.stringify(dataList),
                        success:function (dataResponse) {

                        },
                        error:function () {
                            alert("出错了")
                        },
                        contentType:"application/json;charset=utf-8"
                    }
                );
            }
        </script>
    </div>

    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- footer end -->
 <script>
 </script>
</body>
</html>